import 'package:flutter/material.dart';
import 'dart:ui';

import 'package:wis_flutter/bottomBar.dart';     // 底部导航条
import 'package:wis_flutter/index.dart';
import 'package:wis_flutter/wis_component/barcode.dart';        // wis flutter 组件
import 'package:flutter/services.dart';



// form
class FormPage extends StatefulWidget {

    FormPage({
        Key key,
    }) : super(key: key);

    @override
    _FormPageState createState() => new _FormPageState();
}



class _FormPageState extends State<FormPage> {

  List<Map<String, dynamic>> _treechildren = [];   // 树  数据
  List _imgList=[];   // 自定义 图片
  List<Map<dynamic, dynamic>> _selectChildren=[];  // 下拉框 children

  // 定义 表单 字段 
  GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  TextEditingController _nameController =  TextEditingController();           // 文本框
  TextEditingController _nameSController =  TextEditingController();          // 文本框
  TextEditingController _numberController =  TextEditingController();          // 文本框

  

  TextEditingController _scannerController =  TextEditingController();           // 文本框
  
  TextEditingController _selectController =  TextEditingController();         // 下拉框
  TextEditingController _selectSController =  TextEditingController();         // 下拉框
  TextEditingController _selectCorrelateForm =  TextEditingController();         // 下拉框 联动

  


  TextEditingController _datePickerController =  TextEditingController();     // 时间控件
  TextEditingController _timePickerController =  TextEditingController();     // 时间控件
  TextEditingController _dateAndtimePickerController =  TextEditingController();     // 日期 时间控件

  
  

  TextEditingController _checkboxController =  TextEditingController();     // 复选框 单选
  TextEditingController _checkboxSController =  TextEditingController();     // 复选框 多选
  TextEditingController _uploadPicturesController =  TextEditingController();     //  图片上传
  TextEditingController _uploadFileController =  TextEditingController();     //  文件上传




  // 初始化
  void initState() {
    super.initState();

    this._checkboxSController.text='1,2';    // 复选框 多选 设置选中
    this._checkboxController.text='1';       // 复选框 单选 设置选中

    this._selectController.text='3';         // 下拉框 设置选中  
    this._selectSController.text='11,33';       // 下拉框 设置选中  

    // 表单初始化
    // this._nameController.text = 'ptbird';                 // 设置初始值


    // this._datePickerController.text = '2020-04-07';    // 设置日期初始值
    // this._timePickerController.text = '21:01';            // 设置时间初始值

    
    setState(() {
      _imgList=[                           // 默认值
        // {
        //   "id":3,
        //   "image":"http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853"
        // },
        // {
        //   "image":"http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853"
        // }                                                                 
      ];
      _selectChildren=[
          {
            "id":11,
            "value":"AA撒打算12q"
          },
          {
            "id":33,
            "value":"QQ教育厅"
          }   
      ];
      _treechildren=[
          {
            "label": "一级标题一",
            "key": "dsds77B1",
            "children": [
              {
                "label": "Alabama一级标题", 
                "key": "aqwwAL",
                "children": [
                  {"label": "111第三级第三级第三级第三级111", "key": "dfrrB2143"},
                  {"label": "1111567888888888888888888222", "key": "hjuyfB2222"},
                ]                
              },
              {"label": "Alaska", "key": "aaAK"},
            ]
          },
          {
            "label": "第一级-多层的",
            "key": "aaAKd55sdsd",
            "children": [
              {
                "label": "第二级", 
                "key": "B1dsewe22ds",
                "children": [
                  {"label": "第三级111", "key": "B2143"},
                  {"label": "第三级222", "key": "B2222"},
                ]
              },
              {"label": "Alaska", "key": "ccfB2"},
            ]
          },  
        ];   
    });
  }

  // 保存提交
  void _forSubmitted() {
    var _form = _formKey.currentState;

    print( _selectController.text );  
    print( _selectSController.text );  

    if (_form.validate()) {
      //  _form.save();

      print( _nameController.text );    
      print( _selectController.text );  
      print( _selectSController.text );  
      print(_scannerController.text);
      print( _datePickerController.text );     

      print( _checkboxController.text );     
      print( _checkboxSController.text );     

      // print(_password);
    }
  } 



  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset:false,
        appBar: AppBar( title: const Text('Form') ),  // 头部导航条
        bottomNavigationBar: BottomBarWidget(),       // 底部导航条
        backgroundColor: Colors.blue[10],
        floatingActionButton: FloatingActionButton(
          onPressed: _forSubmitted,
          child: Text('提交'),
        ),
        body: Form(
          key: _formKey,
          child: ListView(
              cacheExtent:window.physicalSize.height,
              padding: EdgeInsets.fromLTRB(0,2,0,62),
              children: <Widget>[

                  // 单行文本
                  WisTextForm(
                    controller: _nameController,   // 表单名
                    label:'单行文本输入框',
                    //readOnly:true,                 // 只读
                    validator: true,                // 必填  
                    validatorText:"必填",       // 必填提示
                    // maxLines:1,                 // 多行文本 默认值1
                    onChanged:(val){
                      // val值改变监听
                      print(val);
                    }
                  ),


                  // 数字输入框
                  WisTextForm(
                    controller: _numberController,   // 表单名
                    label:'数字输入框',
                    //readOnly:true,                 // 只读
                    validator: true,                // 必填  
                    validatorText:"必填",       // 必填提示
                    // maxLines:1,                 // 多行文本 默认值1
                    keyboardType:TextInputType.number,     // 数字键盘
                    // inputFormatters:[                      // 自定义 正则检验
                    //   // WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),   //只允许输入字母
                    // ],                    
                    onChanged:(val){
                      // val值改变监听
                      print(val);
                    }
                  ),

                // 多行文本
                  WisTextForm(
                    controller: _nameSController,   // 表单名
                    label:'多行文本输入框',
                    //readOnly:true,                 // 只读
                    validator: true,                // 必填  
                    validatorText:"必填",       // 必填提示
                    maxLines:1,                 // 多行文本 默认值1
                    onChanged:(val){
                      // val值改变监听
                      print(val);
                    }                    
                  ),

                  // // 扫码
                  // BarcodeForm(
                  //   controller: _scannerController,   // 表单名
                  //   label:'扫码文本',
                  //   //readOnly:true,                 // 只读
                  //   validator: true,                // 必填
                  //   validatorText:"必填",       // 必填提示
                  //   // maxLines:1,                 // 多行文本 默认值1
                  // ),

                  // 单选下拉框
                  WisSelectForm(
                    controller: _selectController,    // 表单名
                    label:'单选下拉框',
                    // readOnly:!!true,                   // 只读
                    validator: true,
                    // validatorText:"下拉必填",
                    //multiple: !false,                  // 是否多选
                    onSearch:(option){
                      // print(option);
                    },
                    initialData:true,                // 表单返回选中的 原始数据
        
                    onChanged:(val){
                      // val值改变监听
                      // print(val);
                    },    
                    onSave: (option){
                      // 保存回调
                      // print(option);
                    },                                       
                    children:[
                        {
                          "id":1,
                          "value":"撒打算12q"
                        },
                        {
                          "id":3,
                          "value":"教育厅"
                        }   
                    ]
                  ),


                  // 多选下拉框
                  WisSelectForm(
                    controller: _selectSController,    // 表单名
                    label:'多选下拉框555',
                    // readOnly:!!true,                   // 只读
                    validator: true,
                    // validatorText:"下拉必填",
                    multiple: true,                  // 是否多选
                    onSearch:(option){
                      // print(option);
                      setState(() {
                        _selectChildren=[
                          {
                            "id":71,
                            "value":"是的是的"
                          }
                        ];
                      });
                    },
                    initialData:true,              // 表单返回选中的 原始数据
      
                    onChanged:(val){
                      // val值改变监听
                      // print(val);
                      // setState(() {
                      // });
                    },  
                    onSave: (option){
                      // 保存回调
                      // print(option);
                    },                   
                    children: _selectChildren
                  ),

                  // 下拉框 联动
                  WisSelectCorrelateForm(
                    controller: _selectCorrelateForm,   // 表单名
                    label:'下拉框-联动',
                    readOnly:!true,                      // 只读
                    validator: true,                     // 必填  
                    // validatorText:"必填提示",
                    children: _treechildren,           // 树 数据
                    defaultVal:"76767 / hdsudhus",      // 设置默认值
                    onChanged:(val){
                      // val值改变监听
                      print(val);
                    },                     
                  ),

                  // 日期选择
                  WisDatePickerForm(
                    controller: _datePickerController,   // 表单名
                    label:'日期选择',
                    readOnly:!true,                      // 只读
                    validator: true,                     // 必填  
                    // validatorText:"必填提示",
                    // formatDate:['yyyy',"年",'mm',"月",'dd'],   // 日期格式化
                    // firstDate: DateTime(2020,4,5),       // 开始日期
                    // lastDate: DateTime(2020,4,26),       // 结束日期
                    onChanged:(val){
                      // val值改变监听
                      print(val);
                    },  
                  ),


                  // 时间选择
                  WisTimePickerForm(
                    controller: _timePickerController,   // 表单名
                    label:'时间选择',
                    readOnly:!true,                      // 只读
                    validator: true,                     // 必填  
                    // validatorText:"必填提示",
                    onChanged:(val){
                      // val值改变监听
                      print(val);
                    },                      
                  ),


                  // 日期时间 选择
                  WisDateAndTimePickerForm(
                    controller: _dateAndtimePickerController,   // 表单名
                    label:'日期-和-时间',
                    readOnly:!true,                      // 只读
                    validator: true,                     // 必填  
                    // validatorText:"必填提示",
                    // formatDate:['yyyy',"年",'mm',"月",'dd'],   // 日期格式化
                    // firstDate: DateTime(2020,4,5),       // 开始日期
                    // lastDate: DateTime(2020,4,26),       // 结束日期
                    onChanged:(val){
                      // val值改变监听
                      // print(val);
                    },                      
                  ),

                  // 复选框单选
                  WisCheckboxForm(
                    controller: _checkboxController,    // 表单名
                    label:'复选框-单选',
                    validator: true,
                    validatorText:"下拉必填",
                    // readOnly:!!true,                   // 只读
                    //multiple: !false,                  // 是否多选
                    initialData:false,                // 表单返回选中的 原始数据
                    onChanged:(val,allVal){
                      // val值改变监听
                      // print(val);
                      // print(allVal);

                    },                     
                    children:[
                      {
                        "id":1,
                        "value":"已读",
                      },
                      {
                        "id":2,
                        "value":"未读"                        
                      }
                    ]
                  ),



                  // 复选框多选
                  WisCheckboxForm(
                    controller: _checkboxSController,    // 表单名
                    label:'复选框-多选',
                    validator: true,
                    validatorText:"下拉必填",
                    // readOnly:!!true,                   // 只读
                    multiple: true,                  // 是否多选
                    initialData:!false,                // 表单返回选中的 原始数据
                    onChanged:(val,allVal){
                      // val值改变监听
                      // print(val);
                      // print(allVal);

                    },                     
                    children:[
                      {
                        "id":1,
                        "value":"已读",
                      },
                      {
                        "id":2,
                        "value":"未读"                        
                      }
                    ],
                  ),


                  // 图片上传
                  WisUploadPicturesForm(
                    controller: _uploadPicturesController,   // 表单名
                    label:'图片上传',
                    hideAddButton: true,                    // 隐藏添加按钮
                    // hideCameraButton: true,                    // 隐藏相机按钮

                    // readOnly:true,                      // 只读
                    // validator: true,                     // 必填  
                    // validatorText:"必填提示",
                    maxLimit:5,                         // 数量限制
                    onDeleteChildren:(option){            // 图片删除 回调
                      print(option); // 图片地址
                    },
                    children:_imgList,
                    onChanged:(val){
                      // val值改变监听
                      print(val);


                      List _testList=[];

                      // 模拟 提交
                      _testList..addAll(_imgList)..addAll([{
                        "image":"http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853"
                      }]);
                                                     
                      setState(() {
                        _imgList=_testList;
                      });


                    },                      
                  ),



                  // 文件 上传
                  WisUploadFileForm(
                    controller: _uploadFileController,   // 表单名
                    label:'文件上传',
                    readOnly:false,                      // 只读
                    // validator: true,                     // 必填  
                    // validatorText:"必填提示",
                    maxLimit:5,                       // 数量限制
                    onDeleteChildren:(option){            // 自定义 文件删除 回调
                      // print(option);
                    },                    
                    children:[                        // 上次文件
                      {
                        "fileName":"ere.text",
                        "onDownload": (option){
                          // 下载按钮的  回调
                          print(option);
                        },
                      },
                      {
                        "fileName":"111.text",
                      }
                    ],
                    // 删除的 回调
                    onDelete:(file){
                      print(file);
                    },
                    // 上传 及时回调
                    onUpload:(file){
                      // print(file);
                    },
                    onChanged:(files){
                      // 文件 值改变监听
                      // print(files);
                    },                      
                  ),


              ],
          )
        )
    ); 
  }

}








